<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>候选人信息列表</title>
		<link href="../bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.class_div_scorelist {
				width: 100%;
				height: 100vh;
			}
			
			.class_div_header {
				height: 15vh;
				background-image: url(../img/header.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
			
			.class_h1_header_title {
				margin: 0;
				text-align: center;
				color: #FFFFFF;
				line-height: 7vh;
			}
			
			.class_div_title {
				font-weight: bold;
				font-size: 1.3em;
			}
			
			.class_div_btngroup button {
				margin-left: 5px;
				float: right;
			}
			
			.class_div_table {
				margin-top: 20px;
			}
			
			.td_content {
				text-align: center;
			}
			
			.tr_btngroup {
				text-align: center;
			}
			
			.tr_btngroup button {
				margin-left: 5px;
			}
			.class_div_logout{
				position: fixed;
				bottom:50px;
				right: 50px;
			}
			.class_div_logout button{
				width: 80px;
				height:40px;
			}
			#candidateTable{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div class="class_div_scorelist">
			<div class="class_div_header">
			</div>

			<div id="formInfo" style="display: none;"></div>
			<div class="row class_div_container" style="margin:0px">
				<div class="col-xs-10 col-xs-offset-1">
					<div class="class_div_table">
						<div class="container">
							<span class="class_div_title">
									候选人信息列表
								</span>
							<span class="class_div_btngroup">
								<button type="button" class="btn btn-danger btn_group" id="uploadImg">导入照片</button>
								<button type="button" class="btn btn-danger btn_group" id="uploadZipImg">导入Zip照片包</button>
								<button type="button" class="btn btn-danger btn_group" id="uploadExcel">导入Excel</button>
								<button type="button" class="btn btn-danger btn_group" onclick="exportExcel()">导出Excel</button>
								<button type="button" class="btn btn-danger btn_group" onclick="showModal('add')">新增</button>
								<span>
								<table id="candidateTable" lay-filter="test"></table>	
						</div>
					</div>
				</div>
			</div>
			<div class="class_div_logout">
				<a href="Router.html"><button type="button" class="btn btn-info">返回首页</button></a>
			</div>
			<input id="handle_status" value="" hidden="hidden"> 	
		</div>
		<script src="../js/jquery-1.12.4/jquery.min.js"></script>
		<script src="../bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="../js/jquery-2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<script type="text/javascript" src="../js/ip.js"></script>
		<script type="text/javascript">
			
			
			var headerList = [{
				field: 'index',
				title: '#',
				type: 'numbers',
				width: '5%',
				align: 'center',
			},{
				field: 'name',
				title: '姓名',
				align: 'center',
			},{
				field: 'sex',
				title: '性别',
				align: 'center',
			},{
				field:'school',
				title: '学校',
				align: 'center',
			},{
				field:'number',
				title: '选手编号',
				align: 'center',
			},{
				field:'sort',
				title: '答辩序号',
				align: 'center',
			},{
				field:'handel',
				title: '操作',
				align: 'center',
				toolbar:'#toolBar'
			}]
			
			$(document).ready(function() {
				getRaterList();
			});
			function getRaterList(){
				var postaddress = ip + '/candidate/list';
				var info = new Object();
				info.scoreInfoId = 1;  
				$.ajax({
					//几个参数需要注意一下
					type: "POST", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					contentType: "application/json;charset=utf-8",
					url: postaddress, //url
					data: JSON.stringify(info),
					success: function(result) {
						if(result.code === 0){
							creatTable(result.data);
						}
					},
					error: function() {
						alert("错误");
					}
				});
			}
			function creatTable(data){
				layui.use('table', function() {
					let table = layui.table;
					table.render({
						elem: '#candidateTable',
						limit:100,
						size: 'xs',
						data: data,
						cols: [headerList],
					});
					table.on('tool()', function(obj) {
						let data = obj.data;
						if(obj.event === 'edit'){
							showModal(data,'edit');
						}else if(obj.event === 'del'){
							layer.confirm('确定删除？', function(index){
								let info = new Object();
									info.id = data.id;
								let postaddress = ip + '/candidate/del'
								$.ajax({
									type: "POST", 
									dataType: "json",
									contentType: "application/json;charset=utf-8",
									url: postaddress, 
									data: JSON.stringify(info),
									success: function(result) {
										if(result.code === 0){
											obj.del(); //删除对应行（tr）的DOM结构
						       				layer.close(index);
										}else{
											layer.close(index);
										}
									},
									error: function() {
										alert("错误");
									}
								});
						    });
							
							
						}
					});
				});
			}
			
			function showModal(data,type){
				let title;
				if(type === 'edit'){
					title = '编辑候选人信息';
				}else if(type === 'add'){
					title = '新增候选人信息';
				}
				layer.open({
                    type:2,
                    title:title,
                    skin:"myclass",
                    area:['600px', '700px'],
                    content:'CompetitorForm.html',
                    success:function(layero,index){
                    	if(data){
                    		let body = layer.getChildFrame('body',index);
	                    	let inputList = body.find('input');
	                    	let editOrAdd = body.find('#editOrAdd');
	                    	for(var j = 0; j< inputList.length; j++){
	                    		$(inputList[j]).val(data[inputList[j].name]);
	            			}
                    	}
                    },
                    end:function(){  
			            var handle_status = $("#handle_status").val();  
			            if ( handle_status == '1' ) {  
			                layer.msg('编辑成功！',{  
			                    icon: 1,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			                },function(){  
			                    getRaterList();
			                });  
			            } else if ( handle_status == '2' ) {  
			                layer.msg('编辑失败！',{  
			                    icon: 2,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			                },function(){  
			                    getRaterList(); 
			                });  
			            }
			        } 
               });
			}
			
			layui.use('upload', function(){
				var $ = layui.jquery
  				,upload = layui.upload;
				upload.render({
					elem: '#uploadExcel'
					,url:ip+'/candidate/import'
					,accept: 'file' //普通文件
					,done: function(res){
						if(res.code === 0){
							layer.msg('导入成功！',{  
			                    icon: 1,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			           		});
						}else{
							layer.msg('导入失败！',{  
			                    icon: 2,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			            	});
						}
					    
					}
				});
				upload.render({
					elem: '#uploadImg'
					,url:ip+'/candidate/img'
					,accept: 'file' //普通文件
					,done: function(res){
					   if(res.code === 0){
							layer.msg('导入成功！',{  
			                    icon: 1,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			            	});
						}else{
							layer.msg('导入失败！',{  
			                    icon: 2,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			            	});
						}
					}
				});
				upload.render({
					elem: '#uploadZipImg'
					,url:ip+'/candidate/imgs'
					,accept: 'file' //普通文件
					,done: function(res){
					   if(res.code === 0){
							layer.msg('导入成功！',{  
			                    icon: 1,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			            	});
						}else{
							layer.msg('导入失败！',{  
			                    icon: 2,  
			                    time: 2000 //2秒关闭（如果不配置，默认是3秒）  
			            	});
						}
					}
				});
			});
			function exportExcel(){
				location.href = ip + '/candidate/excel?scoreInfoId=1'
			}
			
			
		</script>
		<script type="text/html" id="toolBar">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	</body>

</html>


<!--candidate/add  scoreInfoId = 1
         /del 
         /get 
         /edit 
         /list/scoreInfoId=1
         
         
         candidate/excel?scoreInfoId=1  导出
         /import 上传excel
         /img 上传照片  提示文件名必须为候选人电话号码
         /imgs  上传zip
         /getimg id-->